<!--
  Copyright © 2015 Cask Data, Inc.
 
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at
 
  http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
--> 

<div class="jumbotron">
  <h1>Kitchen Sink</h1>
</div>

<div class="row">
  <div class="col-lg-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        Headings
      </div>

      <div class="panel-body">
        <h1 class="page-header">Page Header <small>With Small Text</small></h1>
        <h1>This is an h1 heading</h1>
        <h2>This is an h2 heading</h2>
        <h3>This is an h3 heading</h3>
        <h4>This is an h4 heading</h4>
        <h5>This is an h5 heading</h5>
        <h6>This is an h6 heading</h6>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        Tables
      </div>

      <div class="panel-body">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th
              <th>Tables</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>1</td>
              <td>Michael</td>
              <td>Are formatted like this</td>
            </tr>

            <tr>
              <td>2</td>
              <td>Lucille</td>
              <td>Do you like them?</td>
            </tr>

            <tr class="success">
              <td>3</td>
              <td>Success</td>
              <td></td>
            </tr>

            <tr class="danger">
              <td>4</td>
              <td>Danger</td>
              <td></td>
            </tr>

            <tr class="warning">
              <td>5</td>
              <td>Warning</td>
              <td></td>
            </tr>

            <tr class="active">
              <td>6</td>
              <td>Active</td>
              <td></td>
            </tr>
          </tbody>
        </table>

        <table class="table table-striped table-bordered table-condensed">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Tables</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>1</td>
              <td>Michael</td>
              <td>This one is bordered and condensed</td>
            </tr>

            <tr>
              <td>2</td>
              <td>Lucille</td>
              <td>Do you still like it?</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        Content Formatting
      </div>

      <div class="panel-body">
        <p class="lead">This is a lead paragraph.</p>
        <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to
        wrap to <span style="text-decoration: underline">multiple lines</span>
        so that you can see how the line spacing looks.</p>
        <p class="text-muted">Muted color paragraph.</p>
        <p class="text-warning">Warning color paragraph.</p>
        <p class="text-danger">Danger color paragraph.</p>
        <p class="text-info">Info color paragraph.</p>
        <p class="text-success">Success color paragraph.</p>
        <p><small>This is text in a <code>small</code> wrapper. <abbr title=
        "No Big Deal">NBD</abbr>, right?</small></p>
        <hr>

        <address>
          <strong>Cask Data</strong><br>
          150 Grant Ave<br>
          Palo Alto, CA<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
          <a href="mailto:#">first.last@example.com</a>
        </address>
        <hr>

        <blockquote>
          Here's what a blockquote looks like in Bootstrap. <small>Use
          <code>small</code> to identify the source.</small>
        </blockquote>
        <hr>

        <div class="row">
          <div class="col-xs-6">
            <ul>
              <li>Normal Unordered List</li>
              <li>Can Also Work
                <ul>
                  <li>With Nested Children</li>
                </ul>
              </li>
              <li>Adds Bullets to Page</li>
            </ul>
          </div>

          <div class="col-xs-6">
            <ol>
              <li>Normal Ordered List</li>
              <li>Can Also Work
                <ol>
                  <li>With Nested Children</li>
                </ol>
              </li>
              <li>Adds Bullets to Page</li>
            </ol>
          </div>
        </div>
        <hr>
        <pre>
function preFormatting() {  // looks like this;
var something = somethingElse;  return true;}
</pre>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        Progress Bars
      </div>

      <div class="panel-body">
        <div class="progress">
          <div class="progress-bar" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>

        <div class="progress">
          <div class="progress-bar progress-bar-success" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>

        <div class="progress">
          <div class="progress-bar progress-bar-info" style="width: 20%">
            <span class="sr-only">20% Complete</span>
          </div>
        </div>

        <div class="progress">
          <div class="progress-bar progress-bar-warning" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
          </div>
        </div>

        <div class="progress">
          <div class="progress-bar progress-bar-danger" style="width: 80%">
            <span class="sr-only">80% Complete (danger)</span>
          </div>
        </div>

        <div class="progress">
          <div class="progress-bar progress-bar-success" style="width: 35%">
            <span class="sr-only">35% Complete (success)</span>
          </div>

          <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
          </div>

          <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class='sr-only'>10% Complete (danger)</span>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        Images
      </div>

      <div class="panel-body">
        <p>
          <img class="img-rounded" src="http://placehold.it/100x100" />
          <img class="img-circle" src="http://placehold.it/100x100" />
          <img class="img-thumbnail" src="http://placehold.it/100x100" />
        </p>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        Buttons
      </div>

      <div class="panel-body">
        <p>
          <button class="btn btn-lg btn-default" type="button">Default</button>
          <button class="btn btn-lg btn-primary" type="button">Primary</button>
          <button class="btn btn-lg btn-success" type="button">Success</button>
          <button class="btn btn-lg btn-info" type="button">Info</button>
          <button class="btn btn-lg btn-warning" type="button">Warning</button>
          <button class="btn btn-lg btn-danger" type="button">Danger</button>
          <button class="btn btn-lg btn-link" type="button">Link</button>
        </p>

        <p>
          <button class="btn btn-default" type="button">Default</button>
          <button class="btn btn-primary" type="button">Primary</button>
          <button class="btn btn-success" type="button">Success</button>
          <button class="btn btn-info" type="button">Info</button>
          <button class="btn btn-warning" type="button">Warning</button>
          <button class="btn btn-danger" type="button">Danger</button>
          <button class="btn btn-link" type="button">Link</button>
        </p>

        <p>
          <button class="btn btn-sm btn-default" type="button">Default</button>
          <button class="btn btn-sm btn-primary" type="button">Primary</button>
          <button class="btn btn-sm btn-success" type="button">Success</button>
          <button class="btn btn-sm btn-info" type="button">Info</button>
          <button class="btn btn-sm btn-warning" type="button">Warning</button>
          <button class="btn btn-sm btn-danger" type="button">Danger</button>
          <button class="btn btn-sm btn-link" type="button">Link</button>
        </p>

        <p>
          <button class="btn btn-xs btn-default" type="button">Default</button>
          <button class="btn btn-xs btn-primary" type="button">Primary</button>
          <button class="btn btn-xs btn-success" type="button">Success</button>
          <button class="btn btn-xs btn-info" type="button">Info</button>
          <button class="btn btn-xs btn-warning" type="button">Warning</button>
          <button class="btn btn-xs btn-danger" type="button">Danger</button>
          <button class="btn btn-xs btn-link" type="button">Link</button>
        </p>

        <p>
          <button class="btn btn-default" type="button"><span class="fa fa-star"></span> Font Awesome!</button>
          <button class="btn btn-primary" type="button"><span class="fa fa-edit"></span></button>
          <button class="btn btn-success" type="button"><span class="fa fa-plus"></span></button>
          <button class="btn btn-info" type="button"><span class="fa fa-cog"></span></button>
          <button class="btn btn-warning" type="button"><span class="fa fa-arrow-down"></span></button>
          <button class="btn btn-danger" type="button"><span class="fa fa-arrow-up"></span></button>
          <button class="btn btn-link" type="button"><span class="fa fa-cube"></span></button>
        </p>

      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-4">
    <ul class="list-group">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
  </div>

  <div class="col-lg-4">
    <div class="list-group">
      <a class="list-group-item active" href="#">Cras justo odio</a> <a class=
      "list-group-item" href="#">Dapibus ac facilisis in</a> <a class=
      "list-group-item" href="#">Morbi leo risus</a> <a class="list-group-item"
      href="#">Porta ac consectetur ac</a> <a class="list-group-item" href=
      "#">Vestibulum at eros</a>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="list-group">
      <a class="list-group-item active" href="#">
      <h4 class="list-group-item-heading">List group item heading</h4>

      <p class="list-group-item-text">Donec id elit non mi porta gravida at
      eget metus. Maecenas sed diam eget risus varius blandit.</p></a><a class=
      "list-group-item" href="#">
      <h4 class="list-group-item-heading">List group item heading</h4>

      <p class="list-group-item-text">Donec id elit non mi porta gravida at
      eget metus. Maecenas sed diam eget risus varius blandit.</p></a><a class=
      "list-group-item" href="#">
      <h4 class="list-group-item-heading">List group item heading</h4>

      <p class="list-group-item-text">Donec id elit non mi porta gravida at
      eget metus. Maecenas sed diam eget risus varius blandit.</p></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-3">
    <div class="panel panel-primary" id="panels">
      <div class="panel-heading">
        This is a header
      </div>

      <p class="panel-body">This is a panel</p>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="panel panel-success">
      <div class="panel-heading">
        This is a header
      </div>

      <div class="panel-body">
        This is a panel
      </div>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="panel panel-danger">
      <div class="panel-heading">
        This is a header
      </div>

      <div class="panel-body">
        This is a panel
      </div>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="panel panel-warning">
      <div class="panel-heading">
        This is a header
      </div>

      <div class="panel-body">
        This is a panel
      </div>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-3">
    <div class="panel panel-info">
      <div class="panel-heading">
        This is a header
      </div>

      <p class="panel-body">This is a panel</p>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="panel panel-default">
      <div class="panel-heading">
        This is a header
      </div>

      <div class="panel-body">
        This is a panel
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">First Item</li>

        <li class="list-group-item">Second Item</li>

        <li class="list-group-item">Third Item</li>
      </ul>

      <div class="panel-footer">
        This is a footer
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="well">
      Default Well
    </div>

    <div class="well well-sm">
      Small Well
    </div>
  </div>

  <div class="col-lg-3">
    <div class="well well-lg">
      Large Padding Well
    </div>
  </div>
</div>
